<template>
	<view class="associatuion">
		<view class="address">
			<view class="addred" style="margin-top: 10px;">
				<input type="text" placeholder="请输入车牌…" class="addinput" style="margin-left: 10px;" v-model="plate"/>
				<input type="text" placeholder="请输入司机姓名…" class="addinput" style="margin-left: 5px;" v-model="name"/>
			</view>
			<view class="addred" style="margin-top: 10px;">
				<input type="text" placeholder="请输入电话号…" class="addinputs" style="margin-left: 10px;" v-model="phone"/>
				<button class="but" @click="query">查询</button>
			</view>
		</view>
		<view class="asslist">
			<text class="addtext" style="margin-left: 32px;">车牌号码</text>
			<text class="addtext" style="margin-left: 17px;">司机姓名</text>
			<text class="addtext" style="margin-left: 21px;">司机电话</text>
			<text class="addtext" style="margin-left: 21px;">车辆型号</text>
			<text class="addtext" style="margin-left: 12px;">车长</text>
		</view>
		<checkbox-group @change="checkboxChange" >
			<label v-for="(v, i) in list" :key="i" >
				<checkbox :value="v.carnum" :checked="v.checked" :disabled="v.disbled"></checkbox>
				<text class="addtext" style="margin-left: 1px;">{{ v.carnum }}</text>
				<text class="addtext" style="margin-left: 17px;width: 42px;">{{ v.username }}</text>
				<text class="addtext" style="margin-left: 15px;">{{ v.mobilenum }}</text>
				<text class="addtext" style="margin-left: 10px;width: 42px;">{{ v.carmodel }}</text>
				<text class="addtext" style="margin-left: 12px;">{{ v.carlenth }}m</text>
			</label>
		</checkbox-group>
		<view class="loading" >{{ loadingTxt }}</view>
		<view class="botom">
			<checkbox-group @change="checkboxChanged" style="border: none;">
				<label>
					<checkbox value="all" :checked="allChecked[0].check" style="margin-left: 25px;margin-right: 5px;"></checkbox>
					全选
				</label>
			</checkbox-group>
			<button class="buttom" style="margin-right: 10px;" @click="but">确认关联</button>
		</view>
	</view>
</template>

<script>
import { ajaxs } from '../../apis.js';
var page = 1;
export default {
	data() {
		return {
			list: [],
			add: [],
			cap:[],
			allChecked:[
				{check:false}
			] ,//是否全选
			plate:"",
			name:"",
			phone:"",
			loadingTxt: '加载更多',
		};
	},
	onLoad() {
		var that=this
		ajaxs({
			url:"/v1/capacity/list",
			method:"post",
			success(res){
				var add=[]
				res.data.list.forEach(function(v,i){
					return add.push(v.id)
				})
				that.cap=add
				}
		})
	},
	onShow() {
		var that = this;
		this.assocition()
	},
	onPullDownRefresh() {
		this.assocition()
	},
	onReachBottom() {
		this.getassocition()
	},
	methods: {
		// 关联
		but(){
			var that=this
			ajaxs({
				url:"/v1/capacity/binddriver",
				method:"post",
				data:{
					idlist:that.add
					},
					success(res){
					if(res.data.status=="OK"){
						uni.navigateBack({
							url:"./Capacity"
						})
					}
					}
			})
		},
		// 列表
			assocition(){
				page=1;
				var that=this
				ajaxs({
					url:"/v1/capacity/listunion",
					method:"post",
					data:{
						carnumber:that.plate,
						drivername:that.name,
						drivermobile:that.phone,
						offset: page,
						limit: 20
					},
					success(res){ 
						
						that.list=res.data.list
						uni.stopPullDownRefresh()
						 uni.hideNavigationBarLoading()
						 page++
						 that.list.forEach(item => {
						 	item.checked = false;
						 });
						 //两数组去除重复数值
						 that.list = that.list.filter(function (item) {
						             return that.cap.indexOf(item.id) < 0;
						         })
						 // var arr2=that.cap
						 // var arr1=that.list
						 //     for (var i = 0; i < arr1.length; i++) {
							// 	 console.log(1)
						 //         for (var j = 0; j < arr2.length; j++) {
							// 		 console.log(2)
						 //     //         if (arr1[j].drivername === arr2[i].username) {
							// 			 // console.log(1)
						 //     //             arr1.splice(i, 1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
						 //     //         }
						 //         }
						 //     }
						 //     //alert(arr1.length)
						 //     for (var i = 0; i < arr2.length; i++) {
						 //         arr1.push(arr2[i]);
						 //     }
							 // console.log(arr1)
					}
				})
			},
			getassocition(){
				this.loadingTxt="加载中"
				var that=this
				ajaxs({
					url:"/v1/capacity/listunion",
					method:"post",
					data:{
						carnumber:that.plate,
						drivername:that.name,
						drivermobile:that.phone,
						offset: page,
						limit: 20
					},
					success(res){ 
						if(page>res.data.pageInfo.pages){
							that.loadingTxt = '已经全部加载';
							uni.hideNavigationBarLoading();
							return false;
						}
						
					uni.hideNavigationBarLoading()
					that.list = that.list.concat(res.data.list);
					that.list.forEach(item => {
						item.checked = false;
					});
					uni.stopPullDownRefresh()
					 page++
					 that.list = that.list.filter(function (item) {
					             return that.cap.indexOf(item.id) < 0;
					         })
					}
				})
			},
		// 查询
		query(){
			var that=this
			ajaxs({
				url: '/v1/capacity/listunion',
				method: 'post',
				data: {
					carnumber:that.plate,
					drivername:that.name,
					drivermobile:that.phone,
					offset: page,
					limit: 20
				},
				success(res) {
					that.list = res.data.list;
					that.list.forEach(item => {
						item.checked = false;
					});
					that.list = that.list.filter(function (item) {
					            return that.cap.indexOf(item.id) < 0;
					        })
				}
			});
		},
		// 多选
		checkboxChange: function(e) {
			var items = this.list,
				values = e.detail.value;
				var add=[]
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.carnum)) {
					this.$set(item, 'checked', false);
					add.push(item.id)
				} else {
					this.$set(item, 'checked', false);
				}
			}
			this.add=add
			if(this.add.length==this.list.length){
				this.$set(this.allChecked[0], 'check', true);
			}else{
				this.$set(this.allChecked[0], 'check', false);
			}
		},
		checkboxChanged(e){
		var items = this.list,
			values = e.detail.value;
			var list=[]
			var add=[]
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
				var item=items[i]
				if (values.includes("all")) {
						this.$set(item, 'checked', true);
						this.$set(this.allChecked[0], 'check', true);
						list.push(item)
						add.push(item.id)
				} else {
					this.$set(item, 'checked', false);
					this.$set(this.allChecked[0], 'check', false);
					list.push(item)
				}
			}
			this.list=list
			this.add=add
		}
	}
};
</script>
<style>
.addred {
	display: flex;
	align-items: center;
}
.associatuion {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	flex-direction: column;
}
.address {
	width: 355px;
	height: 115px;
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	position: fixed;
	top: 0;
}
.addinput {
	width: 165px;
	height: 40px;
	background: rgba(249, 249, 249, 1);
	border-radius: 8px;
}
.addinputs {
	width: 240px;
	height: 40px;
	background: rgba(249, 249, 249, 1);
	border-radius: 8px;
}
.but {
	width: 90px;
	height: 40px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	color: #ffffff;
}
.asslist {
	height: 44px;
	width: 100%;
	border-bottom: 1px solid #f5f5f5;
	border-radius: 12px 12px 0px 0px;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	margin-top: 135px;
}
.addtext {
	color: #555555;
	font-size: 14px;
}
checkbox-group {
	width: 100%;
	background-color: #ffffff;
}
label {
	height: 45px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f5f5f5;
}
.botom {
	width: 375px;
	height: 64px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 0px 0px rgba(245, 245, 245, 1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
}
.buttom {
	width: 236px;
	height: 44px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	color: #FFFFFF;
}
.loading {
	text-align: center;
	color: #888;
	margin-top: 10px;
	margin-bottom: 70px;
}
</style>
